<template>
  <ie-page>

    <template #extra>
      <n-space>
        <n-upload
          action="/api/system/template"
          @finish="onUploadFinish"
          :accept="ACCEPT"
          :headers="getHeaders"
          :show-file-list="false"
        >
          <n-button type="primary">上传文件</n-button>
        </n-upload>
      </n-space>
    </template>

    <ie-table-query :model="TemplateModel" />

    <ie-table
      :model="TemplateModel"
      :actions="['delete']"
      @delete:row="handleDelete"
      ref="tableRef"
    />
  </ie-page>
</template>

<script setup>
import { ref } from 'vue'
import { useMutation } from 'villus'

import { useApi, getHeaders } from '/@/api'
import { createDelete } from '/@/graphql'
import TemplateModel from '/@/model/template'
import { ACCEPT } from '/@/model/attachment'

const tableRef = ref()

const { execute: remove } = useMutation(
  createDelete(TemplateModel, 'id', false)
)

function handleDelete(row, refresh) {
  remove({ ids: [row.id] }).then(refresh)
}

function onUploadFinish(res) {
  tableRef.value?.refresh()
}
</script>